Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.

Login Member

Materi Mata Kuliah

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

03 jam 10 menit 00 detik

02 jam 10 menit 00 detik

02 jam 09 menit 00 detik

02 jam 01 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 38 menit 00 detik

00 jam 10 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

Praktik Membuat Layout Website

Pada bagian ini, mahasiswa akan mempraktikkan pembuatan layout website lengkap menggunakan Bootstrap. Layout yang dibuat terdiri dari beberapa bagian utama seperti header, navbar, hero section, card produk, dan footer yang umum digunakan pada website modern.

Dengan praktik ini, mahasiswa akan memahami bagaimana menggabungkan berbagai komponen Bootstrap menjadi satu halaman website yang utuh dan responsive.

1. Membuat Header Website

Header biasanya berisi informasi awal seperti judul website atau identitas brand.

Contoh:

 
<header class="bg-primary text-white text-center p-3">
<h1>My Website</h1>
<p>Belajar Bootstrap</p>
</header>
 

2. Membuat Navbar Responsive

Navbar digunakan untuk navigasi antar halaman dan akan berubah menjadi menu collapse pada layar kecil.

Contoh:

 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">

<a class="navbar-brand" href="#">MySite</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Produk</a></li>
<li class="nav-item"><a class="nav-link" href="#">Kontak</a></li>
</ul>
</div>

</div>
</nav>
 

3. Membuat Section Hero

Hero section adalah bagian utama di halaman depan yang biasanya berisi judul besar dan call to action.

Contoh:

 
<section class="bg-light text-center p-5">
<h1>Selamat Datang</h1>
<p>Website modern dengan Bootstrap</p>
<button class="btn btn-primary">Mulai Sekarang</button>
</section>
 

4. Membuat Section Card / Produk

Card digunakan untuk menampilkan produk atau informasi dalam bentuk grid.

Contoh:

 
<div class="container mt-5">
<div class="row">

<div class="col-md-4">
<div class="card">
<img src="produk1.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Produk 1</h5>
<p class="card-text">Deskripsi produk</p>
<button class="btn btn-success">Beli</button>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card">
<img src="produk2.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Produk 2</h5>
<p class="card-text">Deskripsi produk</p>
<button class="btn btn-success">Beli</button>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card">
<img src="produk3.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Produk 3</h5>
<p class="card-text">Deskripsi produk</p>
<button class="btn btn-success">Beli</button>
</div>
</div>
</div>

</div>
</div>
 

5. Membuat Footer

Footer adalah bagian bawah website yang biasanya berisi informasi tambahan.

Contoh:

 
<footer class="bg-dark text-white text-center p-3 mt-5">
<p>© 2026 My Website | All Rights Reserved</p>
</footer>
 

Contoh Layout Website Lengkap

Berikut contoh sederhana halaman website lengkap:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Website Profile</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

<!-- HEADER -->
<header class="bg-primary text-white text-center p-3">
  <h1>Website Profile</h1>
  <p>Belajar Bootstrap Layout</p>
</header>

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    
    <a class="navbar-brand" href="#">MyProfile</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Beranda</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Tentang Saya</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Riwayat Pendidikan</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Kontak Saya</a></li>
      </ul>
    </div>

  </div>
</nav>

<!-- MAIN CONTENT -->
<div class="container mt-4">
  <div class="row">

    <!-- SIDEBAR -->
    <div class="col-md-3 mb-3">
      <div class="card">
        <div class="card-header bg-secondary text-white">
          Menu Sidebar
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Profil</li>
          <li class="list-group-item">Skill</li>
          <li class="list-group-item">Portfolio</li>
          <li class="list-group-item">Kontak</li>
        </ul>
      </div>
    </div>

    <!-- CONTENT UTAMA -->
    <div class="col-md-9">

      <!-- BERANDA -->
      <section class="mb-4">
        <div class="card">
          <div class="card-body">
            <h3>Beranda</h3>
            <p>Selamat datang di website profile saya menggunakan Bootstrap.</p>
          </div>
        </div>
      </section>

      <!-- TENTANG SAYA -->
      <section class="mb-4">
        <div class="card">
          <div class="card-body">
            <h3>Tentang Saya</h3>
            <p>Saya adalah seorang mahasiswa yang sedang belajar pemrograman web.</p>
          </div>
        </div>
      </section>

      <!-- RIWAYAT PENDIDIKAN -->
      <section class="mb-4">
        <div class="card">
          <div class="card-body">
            <h3>Riwayat Pendidikan</h3>
            <ul>
              <li>SD Negeri 1</li>
              <li>SMP Negeri 2</li>
              <li>SMA Negeri 3</li>
              <li>Universitas</li>
            </ul>
          </div>
        </div>
      </section>

      <!-- KONTAK -->
      <section class="mb-4">
        <div class="card">
          <div class="card-body">
            <h3>Kontak Saya</h3>
            <p>Email: [email protected]</p>
            <p>Telepon: 08123456789</p>
          </div>
        </div>
      </section>

    </div>

  </div>
</div>

<!-- FOOTER -->
<footer class="bg-dark text-white text-center p-3 mt-4">
  <p>© 2026 Website Profile | Bootstrap Layout</p>
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

Penjelasan Struktur Layout

1. Header

  • Menampilkan judul website
  • Menggunakan bg-primary agar menarik

2. Navbar

  • Menu utama:
    • Beranda
    • Tentang Saya
    • Riwayat Pendidikan
    • Kontak Saya
  • Sudah responsive (collapse di mobile)

3. Sidebar

  • Berada di kiri (col-md-3)
  • Menggunakan card + list group
  • Cocok untuk menu tambahan

4. Content Utama

  • Berada di kanan (col-md-9)
  • Berisi beberapa section:
    • Beranda
    • Tentang
    • Pendidikan
    • Kontak

5. Footer

  • Informasi bagian bawah website

Kelebihan Layout Ini

✅ Sudah responsive (grid Bootstrap)
✅ Struktur website lengkap
✅ Cocok untuk:

  • Website profile
  • Company profile
  • Portfolio
  • Tugas mahasiswa

Kesimpulan

Praktik membuat layout website dengan Bootstrap membantu mahasiswa memahami bagaimana menggabungkan berbagai komponen seperti header, navbar, hero section, card, dan footer menjadi satu halaman yang utuh. Dengan memanfaatkan Bootstrap, proses pembuatan website menjadi lebih cepat, rapi, dan responsive. Materi ini sangat penting sebagai dasar dalam pembuatan project website secara lengkap.

Report Error